<template>
  <div>
    <el-row :gutter="20">
      <!-- 左侧div -->
      <el-col :span="6" style="height: 300px">
        <div>
          <span style="padding-left: 80px; color: #777777">订单号：{{orderId}}</span>
        </div>
        <div style="margin-top: 50px; position: relative; top: 20px">
                    <span
                        style="font-weight: bold; font-size: 40px; padding-left: 110px; color: #4CAF50">
                    {{order.orderStatus}}
                    </span>
        </div>
        <div style="margin-top: 50px; text-align: center">
          <el-button type="danger" plain style="width: 130px; height: 40px">评价</el-button>
        </div>
      </el-col>
      <!-- 右侧div -->
      <el-col :span="18" style="border-left: 2px solid lightgrey; padding-left: 30px">
        <el-card style="width: 100%; margin: 20px auto; text-align: center;">
          <div slot="header" class="clearfix">
            <span style="font-size: 24px; color: #333;">订单详情</span>
          </div>
          <div>
            <el-row>
              <el-col :span="24">
                <h3>订单编号：{{ order.id }}</h3>
                <p style="color: #777777">创建时间：{{ order.createTime }}</p >
                <p>店铺名称：{{ order.shopName }}</p>
                <p style="font-size: 15px">订单状态：{{ order.orderStatus }}</p >
              </el-col>
            </el-row>
          </div>
          <div>
          <!--订单信息展示-->
          <!--
            <el-table :data="order.items" style="width: 100%; margin-top: 20px;">
              <el-table-column prop="imageUrl" label="商品图片" width="250" align="center">
                <template #default="scope">
                  <el-image :src="baseUrl+scope.row.imageUrl" style="width: 50px; height: 50px;"></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="proDesc" label="商品描述" width="200" align="left"></el-table-column>
              <el-table-column label="数量" width="200" align="center">
                <template #default="scope">
                  <span>{{ scope.row.quantity }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="price" label="单价" width="150" align="right">
                <template #default="scope">
                  ￥{{ scope.row.price }}
                </template>
              </el-table-column>
              <el-table-column label="小计" width="150" align="right">
                <template #default="scope">
                  ￥{{ scope.row.price * scope.row.quantity }}
                </template>
              </el-table-column>
            </el-table>
            -->
           <el-form>
             <!--商品信息栏-->
             <el-row>
               <el-col :span="8">商品图片</el-col>
               <el-col :span="4">商品描述</el-col>
               <el-col :span="4">单价</el-col>
               <el-col :span="4">数量</el-col>
               <el-col :span="4">小计</el-col>
             </el-row>
            <!--商品信息数据栏-->
             <el-row style="margin-top: 10px">
               <el-col :span="8">
                 <el-image :src="baseUrl+order.productsImg" style="width: 50px; height: 50px;"></el-image>
               </el-col>
               <el-col :span="4">
                 <span>{{ order.productsMsg}}</span>
               </el-col>
               <el-col :span="4">
                 <span>{{ order.price}}</span>
               </el-col>
               <el-col :span="4">
                 <span>{{ order.quantity}}</span>
               </el-col>
               <el-col :span="4">
                 <span>{{ order.price * order.quantity}}</span>
               </el-col>
             </el-row>
           </el-form>
          </div>
          <div style="text-align: right; margin-top: 20px;">
            <span style="font-size: 20px; color: red;">总价：￥ {{order.price * order.quantity}} </span>
          </div>
          <div style="margin-top: 20px;">
            <h3>收货地址</h3>
            <p>{{ order.province+order.city+order.district+order.address }}</p >
            <p>收货人:{{order.username}}</p>
            <p>电话:{{order.phone}}</p>
          </div>
          <div style="text-align: right; margin-top: 20px;">
            <el-button type="primary" @click="payOrder" v-if="order.status === '未支付'">付款</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import router from "@/router";
import axios from "axios";
import qs from "qs";

// 获取传过来的订单id
const params = new URLSearchParams(window.location.search);
const orderId = params.get('id');
const baseUrl = getBaseUrl();
// 示例订单数据
const order = ref({
});

// 模拟 API 调用
const updateOrderStatus = (orderId, status) => {
  return new Promise((resolve, reject) => {
    // 这里可以替换为实际的 API 请求
    setTimeout(() => {
      resolve({ success: true, message: '订单状态更新成功' });
    }, 1000);
  });
};


const user = ref(getUser());
// 获取订单详情
const getOrderDetails = () => {
  let data1 = {
    "userId": user.value.id,
    "id": orderId
  };
  let data = qs.stringify(data1)
  axios.get(BASE_URL+'/v1/user/queryOrderParam?'+data)
      .then(response => {
        if (response.data.code === 2000) {
          order.value = response.data.data[0];
          if (order.value.orderStatus=='5'){
            order.value.orderStatus = '待支付';
          }else if (order.value.orderStatus == 10){
            order.value.orderStatus =  '待收货';
          }else if (order.value.orderStatus == 30){
            order.value.orderStatus = '已完成';
          }else if (order.value.orderStatus == 40){
            order.value.orderStatus = '待评价';
          }
        } else {
          alert(response.data.msg);
        }
      })
};
//页面加载时获取订单详情
onMounted(() => {
  getOrderDetails();
});

const navigatorAddress = () => {
  // 跳转到修改地址页面
  router.push('/addresses');
};

const payOrder = () => {
  // 更新订单状态
  order.value.status = '已支付';

  // 调用 API 更新订单状态（假设有一个 updateOrderStatus 方法）
  updateOrderStatus(order.value.id, '已支付')
      .then(response => {
        console.log('订单状态更新成功', response);
      })
      .catch(error => {
        console.error('订单状态更新失败', error);
      });
};
</script>
<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>
